<template>
  <div id="app">
    <router-view v-if="mainLoaded"></router-view>
    <div v-else class="app-loading">
      加载中
    </div>
  </div>
</template>

<script lang="ts">
import { VueComponent } from '@/vue/vue-component';
import { ipcRenderer } from 'electron';
import { Component } from 'vue-property-decorator';
import { Mutation, State } from 'vuex-class';
import { MutationFunc } from '@/type/typings';

@Component
export default class App extends VueComponent {
  @State('mainLoaded', { namespace: 'system' }) readonly mainLoaded!: boolean;

  @Mutation('setMainLoaded', { namespace: 'system' }) readonly setMainLoaded!: MutationFunc<boolean>;

  onMainLoaded() {
    this.setMainLoaded(true);
  }

  created(): void {
    ipcRenderer.on('main-loaded', this.onMainLoaded);
  }

  beforeDestroy(): void {
    ipcRenderer.removeListener('main-loaded', this.onMainLoaded);
  }
}
</script>

<style lang="less">
@import 'assets/styles/variables';

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: @global-background-color;
  color: @global-font-color;
  font-size: 14px;
  user-select: none;
}

.app-loading {

}
</style>
